<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" />
    <div class="flex mt24">
      <el-card shadow="never" :body-style="{ padding: '12px 10px 12px' }">
        <div slot="header" class="mb9 f16">
          <span style="font-weight: 600">包材配套查询</span>
        </div>
        <Table :tableData="tableData" :tableHeader="tableHeader" :TableHeight="140" />

        <PageModule :PageData="{ pageSizeShow: true }" />
      </el-card>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'PackagingMaterialMatchingQuery'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入指令',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入型体',
    inputValue: ''
  },
  {
    type: 'date',
    dateLabel: '交期',
    dateValue: ''
  },
  {
    type: 'checkbox',
    checkboxLabel: '已配套',
    checked: true
  },
  {
    type: 'checkbox',
    checkboxLabel: '未配套',
    checked: false
  },
  {
    type: 'button',
    checkboxLabel: '明细查询'
  },
  {
    type: 'button',
    checkboxLabel: '导出配套明细'
  },
  {
    type: 'color',
    color1: '#3fff36',
    color1Val: '入库完成'
  },
  {
    type: 'color',
    color1: '#ffc9ae',
    color1Val: '部分入库'
  },
  {
    type: 'color',
    color1: '#ffffff',
    color1Val: '尚未入库'
  }
])

const tableHeader = ref([
  {
    label: '指令',
    prop: 'lotNo'
  },
  {
    label: '型体',
    sortable: true,
    prop: 'materialCode'
  },
  {
    label: '订单量',
    prop: 'materialColor'
  },
  {
    label: '交期',
    prop: 'materialName',
    sortable: true
  },
  {
    label: '配套情况',
    prop: 'specification'
  },
  {
    label: '外箱*',
    prop: 'unit'
  },
  {
    label: '鞋盒*',
    prop: 'storageDate'
  },
  {
    label: '外箱贴标*',
    prop: 'deliveryDate'
  },
  {
    label: '内盒贴标*',
    prop: 'storageQuantity'
  },
  {
    label: '转印标*',
    prop: 'deliveryQuantity'
  },
  {
    label: '材质标*',
    prop: 'inventoryQuantity'
  },
  {
    label: '挂绳/子母扣*',
    prop: 'inventoryQuantity'
  },
  {
    label: '吊牌/信封*',
    prop: 'inventoryQuantity'
  },
  {
    label: '拷贝纸*',
    prop: 'inventoryQuantity'
  },
  {
    label: '防霉片*',
    prop: 'inventoryQuantity'
  },
  {
    label: '胶带*',
    prop: 'inventoryQuantity'
  },
  {
    label: '鞋托',
    prop: 'inventoryQuantity'
  },
  {
    label: '其他包材',
    prop: 'inventoryQuantity'
  },
  {
    label: '备注',
    prop: 'inventoryQuantity'
  }
])
const tableData = ref([
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  },
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  },
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  },
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  },
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  },
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  },
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  },
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  },
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  },
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  },
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  },
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  },
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  },
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  },
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  },
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  },
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  },
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  },
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  },
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  },
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  },
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  },
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  },
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  },
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  },
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  },
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  }
])

const tableHeader2 = ref([
  {
    label: '指令',
    prop: 'instruction',
    width: '92'
  },
  {
    label: '厂商',
    prop: 'manufacturer',
    width: '92'
  },
  {
    label: '日期',
    prop: 'date',
    width: '92'
  },
  {
    label: '单据号码',
    prop: 'billNumber',
    width: '92'
  },
  {
    label: '单据类型',
    prop: 'billType',
    width: '92'
  },
  {
    label: '数量',
    prop: 'quantity',
    width: '92'
  }
])
const tableData2 = ref([
  {
    instruction: '111111',
    manufacturer: '111111',
    date: '111111',
    billNumber: '111111',
    billType: '111111',
    quantity: '111111'
  },
  {
    instruction: '111111',
    manufacturer: '111111',
    date: '111111',
    billNumber: '111111',
    billType: '111111',
    quantity: '111111'
  },
  {
    instruction: '111111',
    manufacturer: '111111',
    date: '111111',
    billNumber: '111111',
    billType: '111111',
    quantity: '111111'
  },
  {
    instruction: '111111',
    manufacturer: '111111',
    date: '111111',
    billNumber: '111111',
    billType: '111111',
    quantity: '111111'
  },
  {
    instruction: '111111',
    manufacturer: '111111',
    date: '111111',
    billNumber: '111111',
    billType: '111111',
    quantity: '111111'
  },
  {
    instruction: '111111',
    manufacturer: '111111',
    date: '111111',
    billNumber: '111111',
    billType: '111111',
    quantity: '111111'
  },
  {
    instruction: '111111',
    manufacturer: '111111',
    date: '111111',
    billNumber: '111111',
    billType: '111111',
    quantity: '111111'
  },
  {
    instruction: '111111',
    manufacturer: '111111',
    date: '111111',
    billNumber: '111111',
    billType: '111111',
    quantity: '111111'
  }
])

const tableHeader3 = ref([
  {
    label: '指令',
    prop: 'instruction',
    width: '92'
  },
  {
    label: '部门',
    prop: 'department',
    width: '92'
  },
  {
    label: '日期',
    prop: 'date',
    width: '92'
  },
  {
    label: '单据号码',
    prop: 'billNumber',
    width: '92'
  },
  {
    label: '单据类型',
    prop: 'billType',
    width: '92'
  },
  {
    label: '数量',
    prop: 'quantity',
    width: '92'
  }
])
const tableData3 = ref([
  {
    instruction: '111111',
    department: '111111',
    date: '111111',
    billNumber: '111111',
    billType: '111111',
    quantity: '111111'
  },
  {
    instruction: '111111',
    department: '111111',
    date: '111111',
    billNumber: '111111',
    billType: '111111',
    quantity: '111111'
  },
  {
    instruction: '111111',
    department: '111111',
    date: '111111',
    billNumber: '111111',
    billType: '111111',
    quantity: '111111'
  },
  {
    instruction: '111111',
    department: '111111',
    date: '111111',
    billNumber: '111111',
    billType: '111111',
    quantity: '111111'
  },
  {
    instruction: '111111',
    department: '111111',
    date: '111111',
    billNumber: '111111',
    billType: '111111',
    quantity: '111111'
  },
  {
    instruction: '111111',
    department: '111111',
    date: '111111',
    billNumber: '111111',
    billType: '111111',
    quantity: '111111'
  },
  {
    instruction: '111111',
    department: '111111',
    date: '111111',
    billNumber: '111111',
    billType: '111111',
    quantity: '111111'
  },
  {
    instruction: '111111',
    department: '111111',
    date: '111111',
    billNumber: '111111',
    billType: '111111',
    quantity: '111111'
  }
])
const materialNameVal = ref('')
</script>

<style lang="less" scoped>
table {
  table-layout: auto !important;
}

:deep(.el-table__header) {
  width: 100% !important;
}

:deep(.el-table__body) {
  width: 100% !important;
}
</style>
